<div class="container-xl">
    {{ .StocksModuleNav }}

    <div class="row">
        <div class="col-8">
            <div class="table-responsive">
              <table class="table table-vcenter border">
                <thead>
                  <tr>
                    <th>组名</th>
                    <th>排序</th>
                    <th style="width: 120px;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  {{ range $index, $map := .GroupList }} 
                  <tr>
                    <td >{{ $map.grp_name }}</td>
                    <td class="text-muted" >
                      {{ $map.order_num }}
                    </td>
                    <td>
                      <a href="javascript:void(0);" onclick="editGrp('{{ $map.grp_id }}', '{{ $map.grp_name }}', '{{ $map.order_num }}')">编辑</a>
                      <a href="javascript:void(0);" class="ml-2" onclick="deleteGrp('{{ $map.grp_id }}')">删除</a>
                    </td>
                  </tr>
                  {{ end }}
                </tbody>
              </table>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-header">
                  引言
                </div>
                <div class="card-body">
                  <blockquote class="blockquote mb-0">
                    <p>股票分组，一般可以分为持仓，伏击圈，历史记录</p>
                    <footer class="blockquote-footer">对股票进行分门别类，方便管理他们<cite title="Source Title">摘自网络</cite></footer>
                  </blockquote>
                  <div class="my-3">
                    <input type="hidden" id="grp_id" />
                    <input type="hidden" id="action" value="create" />

                    <label class="form-label"></label>
                    <input class="form-control" id="grp_name" placeholder="分组名称" />
                  </div>
                  <div class="my-3">
                    <label class="form-label"></label>
                    <input class="form-control" type="number" id="grp_order" placeholder="分组序号" />
                  </div>
                  <button onclick="createOrSaveGrpName();" class="btn btn-light w-100">创建或保存修改</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  function deleteComment(id){
      $.post("/stocks/weigh/deletegrp_name", {id: id}, function(json){
          if(json.flag){
              alert('删除成功');
              $("#comm_id_"+id).remove();
          }else{
              alert(json.msg);
          }
      });
  }

  function editGrp(id, mc, xh){
      $("#grp_id").val(id);
      $("#action").val('edit');
      $("#grp_name").val(mc);
      $("#grp_order").val(xh);
  }
  function deleteGrp(id){
      if (confirm("您确认要删除吗？")){
        $.post("/stocks/group/delete", {grp_id: id}, function(json){
            if(json.flag){
                alert('提交成功');
                window.location.reload();
            }else{
                alert(json.msg);
            }
        });
      }
  }

  function createOrSaveGrpName(){
    var grp_id = document.getElementById("grp_id").value;
    var grp_name = document.getElementById("grp_name").value;
    var grp_order = document.getElementById("grp_order").value || 10;
    var action = document.getElementById("action").value;
    
    if(grp_name.length == 0){
        document.getElementById("grp_name").select();
        return;
    }
    $.post("/stocks/group/save", {grp_id: grp_id, grp_name: grp_name, grp_order: grp_order, action: action}, function(json){
        if(json.flag){
            alert('提交成功');
            window.location.reload();
        }else{
            alert(json.msg);
        }
    });
  }
  document.addEventListener('DOMContentLoaded', function () {
        
  });
</script>